<template>
  <el-aside width="200px">
    <el-row class="tac">
      <el-col :span="24">
        <div class="left-top">房领地</div>
        <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          router
          @open="handleOpen"
          @close="handleClose"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>一级菜单</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">子菜单一</el-menu-item>
              <el-menu-item index="1-2">子菜单一</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-col>
    </el-row>
  </el-aside>
</template>

<script setup lang="ts">
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style lang="scss" scoped>
.el-aside{

  .left-top{
    height: 60px;
    background: #2579ff;
    text-align: center;
    line-height: 60px;
  }
}
</style>